<template>
  <view class="cart-container">
    <!-- 顶部导航 -->
    <view class="cart-header">
      <text class="header-title">购物车</text>
      <text class="edit-btn" @click="toggleEditMode">
        {{ isEditMode ? '完成' : '编辑' }}
      </text>
    </view>
    
    <!-- 购物车列表 -->
    <scroll-view class="cart-list" scroll-y>
      <view v-if="cartItems.length > 0">
        <!-- 商品列表 -->
        <view 
          v-for="(item, index) in cartItems" 
          :key="item.id"
          class="cart-item"
        >
          <view class="item-checkbox" @click="toggleItemSelect(item)">
            <u-icon 
              :name="item.selected ? 'checkbox-mark' : 'checkbox'" 
              size="20" 
              :color="item.selected ? '#007aff' : '#ddd'"
            ></u-icon>
          </view>
          
          <image 
            :src="item.product.imageUrl" 
            class="item-image" 
            mode="aspectFill"
            @click="viewProduct(item.product)"
          ></image>
          
          <view class="item-info">
            <text class="item-title" @click="viewProduct(item.product)">{{ item.product.title }}</text>
            
            <!-- 规格信息 -->
            <view v-if="item.specifications" class="item-specs">
              <text 
                v-for="(spec, specKey) in item.specifications" 
                :key="specKey"
                class="spec-text"
              >
                {{ specKey }}:{{ spec }}
              </text>
            </view>
            
            <view class="item-bottom">
              <view class="price-section">
                <text class="current-price">¥{{ item.price }}</text>
                <text v-if="item.originalPrice" class="original-price">¥{{ item.originalPrice }}</text>
              </view>
              
              <view class="quantity-section">
                <view 
                  class="quantity-btn"
                  :class="{ disabled: item.quantity <= 1 }"
                  @click="decreaseQuantity(item)"
                >
                  <u-icon name="minus" size="14" color="#666"></u-icon>
                </view>
                <text class="quantity-value">{{ item.quantity }}</text>
                <view 
                  class="quantity-btn"
                  :class="{ disabled: item.quantity >= item.product.stock }"
                  @click="increaseQuantity(item)"
                >
                  <u-icon name="plus" size="14" color="#666"></u-icon>
                </view>
              </view>
            </view>
          </view>
          
          <!-- 删除按钮 -->
          <view v-if="isEditMode" class="item-delete" @click="removeItem(item)">
            <u-icon name="trash" size="18" color="#ff4757"></u-icon>
          </view>
        </view>
        
        <!-- 推荐商品 -->
        <view class="recommend-section">
          <view class="recommend-header">
            <text class="recommend-title">猜你喜欢</text>
          </view>
          
          <view class="recommend-list">
            <view 
              v-for="(product, index) in recommendProducts" 
              :key="index"
              class="recommend-item"
              @click="viewProduct(product)"
            >
              <image :src="product.imageUrl" class="recommend-image" mode="aspectFill"></image>
              <text class="recommend-name">{{ product.title }}</text>
              <text class="recommend-price">¥{{ product.currentPrice }}</text>
              <u-button 
                type="primary" 
                size="small" 
                class="add-cart-btn"
                @click.stop="addToCart(product)"
              >
                加购物车
              </u-button>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 空购物车 -->
      <view v-else class="empty-cart">
        <image 
          src="https://trae-api-us.mchost.guru/api/ide/v1/text_to_image?prompt=empty%20shopping%20cart&image_size=square" 
          class="empty-image" 
          mode="aspectFit"
        ></image>
        <text class="empty-text">购物车空空如也</text>
        <text class="empty-desc">快去挑选心仪的商品吧</text>
        <u-button 
          type="primary" 
          class="go-shopping-btn"
          @click="goShopping"
        >
          去逛逛
        </u-button>
      </view>
    </scroll-view>
    
    <!-- 底部操作栏 -->
    <view v-if="cartItems.length > 0" class="cart-footer">
      <view class="footer-left">
        <view class="select-all" @click="toggleSelectAll">
          <u-icon 
            :name="isAllSelected ? 'checkbox-mark' : 'checkbox'" 
            size="20" 
            :color="isAllSelected ? '#007aff' : '#ddd'"
          ></u-icon>
          <text class="select-all-text">全选</text>
        </view>
        
        <view class="total-info">
          <text class="total-label">合计：</text>
          <text class="total-price">¥{{ totalPrice }}</text>
          <text v-if="totalDiscount > 0" class="total-discount">
            已优惠¥{{ totalDiscount }}
          </text>
        </view>
      </view>
      
      <view class="footer-right">
        <u-button 
          v-if="isEditMode"
          class="delete-selected-btn"
          :disabled="selectedItems.length === 0"
          @click="deleteSelected"
        >
          删除选中({{ selectedItems.length }})
        </u-button>
        
        <u-button 
          v-else
          type="primary"
          class="checkout-btn"
          :disabled="selectedItems.length === 0"
          @click="checkout"
        >
          结算({{ selectedItems.length }})
        </u-button>
      </view>
    </view>
    
    <!-- 优惠券弹窗 -->
    <u-popup 
      v-model="showCouponPopup" 
      mode="bottom" 
      border-radius="20"
      :safe-area-inset-bottom="true"
    >
      <view class="coupon-popup">
        <view class="popup-header">
          <text class="popup-title">选择优惠券</text>
          <u-icon name="close" size="20" color="#999" @click="showCouponPopup = false"></u-icon>
        </view>
        
        <scroll-view class="coupon-list" scroll-y>
          <view 
            v-for="(coupon, index) in availableCoupons" 
            :key="index"
            class="coupon-item"
            :class="{ selected: selectedCoupon?.id === coupon.id }"
            @click="selectCoupon(coupon)"
          >
            <view class="coupon-content">
              <view class="coupon-amount">
                <text class="coupon-symbol">¥</text>
                <text class="coupon-value">{{ coupon.discount }}</text>
              </view>
              <view class="coupon-details">
                <text class="coupon-name">{{ coupon.name }}</text>
                <text class="coupon-condition">{{ coupon.condition }}</text>
                <text class="coupon-expire">有效期至：{{ formatDate(coupon.expireTime) }}</text>
              </view>
            </view>
            
            <view class="coupon-selector">
              <u-icon 
                :name="selectedCoupon?.id === coupon.id ? 'checkmark-circle-fill' : 'circle'" 
                size="20" 
                :color="selectedCoupon?.id === coupon.id ? '#007aff' : '#ddd'"
              ></u-icon>
            </view>
          </view>
          
          <view v-if="availableCoupons.length === 0" class="no-coupons">
            <text class="no-coupons-text">暂无可用优惠券</text>
          </view>
        </scroll-view>
      </view>
    </u-popup>
  </view>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { get, post, put, del } from '@/utils/request';

// 购物车商品接口
interface CartItem {
  id: string;
  productId: string;
  product: Product;
  specifications?: Record<string, string>;
  quantity: number;
  price: number;
  originalPrice?: number;
  selected: boolean;
}

// 商品接口
interface Product {
  id: string;
  title: string;
  imageUrl: string;
  currentPrice: number;
  originalPrice?: number;
  stock: number;
}

// 优惠券接口
interface Coupon {
  id: string;
  name: string;
  discount: number;
  condition: string;
  expireTime: string;
  minAmount: number;
}

@Component
export default class CartPage extends Vue {
  // 数据属性
  cartItems: CartItem[] = [];
  recommendProducts: Product[] = [];
  availableCoupons: Coupon[] = [];
  selectedCoupon: Coupon | null = null;
  
  isEditMode: boolean = false;
  showCouponPopup: boolean = false;
  loading: boolean = false;
  
  // 计算属性
  get selectedItems(): CartItem[] {
    return this.cartItems.filter(item => item.selected);
  }
  
  get isAllSelected(): boolean {
    return this.cartItems.length > 0 && this.cartItems.every(item => item.selected);
  }
  
  get totalPrice(): string {
    const total = this.selectedItems.reduce((sum, item) => {
      return sum + (item.price * item.quantity);
    }, 0);
    
    const discount = this.selectedCoupon?.discount || 0;
    return Math.max(0, total - discount).toFixed(2);
  }
  
  get totalDiscount(): number {
    const originalTotal = this.selectedItems.reduce((sum, item) => {
      const originalPrice = item.originalPrice || item.price;
      return sum + (originalPrice * item.quantity);
    }, 0);
    
    const currentTotal = this.selectedItems.reduce((sum, item) => {
      return sum + (item.price * item.quantity);
    }, 0);
    
    const couponDiscount = this.selectedCoupon?.discount || 0;
    return originalTotal - currentTotal + couponDiscount;
  }
  
  // 生命周期
  onLoad() {
    this.loadCartItems();
    this.loadRecommendProducts();
    this.loadAvailableCoupons();
  }
  
  onShow() {
    this.loadCartItems();
  }
  
  // 方法
  
  /**
   * 加载购物车商品
   */
  async loadCartItems() {
    if (this.loading) return;
    
    this.loading = true;
    
    try {
      const response = await get('/cart/items');
      this.cartItems = response.data.items || [];
      
      // 默认全选
      this.cartItems.forEach(item => {
        item.selected = true;
      });
      
    } catch (error) {
      console.error('加载购物车失败:', error);
      
      // 使用模拟数据
      this.cartItems = this.getMockCartItems();
      
      uni.showToast({
        title: '加载失败',
        icon: 'none'
      });
    } finally {
      this.loading = false;
    }
  }
  
  /**
   * 加载推荐商品
   */
  async loadRecommendProducts() {
    try {
      const response = await get('/products/recommend', {
        type: 'cart',
        limit: 6
      });
      this.recommendProducts = response.data.products || [];
    } catch (error) {
      console.error('加载推荐商品失败:', error);
      
      // 使用模拟数据
      this.recommendProducts = this.getMockRecommendProducts();
    }
  }
  
  /**
   * 加载可用优惠券
   */
  async loadAvailableCoupons() {
    try {
      const response = await get('/coupons/available');
      this.availableCoupons = response.data.coupons || [];
    } catch (error) {
      console.error('加载优惠券失败:', error);
      
      // 使用模拟数据
      this.availableCoupons = this.getMockCoupons();
    }
  }
  
  /**
   * 切换编辑模式
   */
  toggleEditMode() {
    this.isEditMode = !this.isEditMode;
  }
  
  /**
   * 切换商品选择
   */
  toggleItemSelect(item: CartItem) {
    item.selected = !item.selected;
  }
  
  /**
   * 切换全选
   */
  toggleSelectAll() {
    const newSelectState = !this.isAllSelected;
    this.cartItems.forEach(item => {
      item.selected = newSelectState;
    });
  }
  
  /**
   * 增加商品数量
   */
  async increaseQuantity(item: CartItem) {
    if (item.quantity >= item.product.stock) {
      uni.showToast({
        title: '库存不足',
        icon: 'none'
      });
      return;
    }
    
    try {
      await put('/cart/update', {
        itemId: item.id,
        quantity: item.quantity + 1
      });
      
      item.quantity++;
    } catch (error) {
      console.error('更新数量失败:', error);
      uni.showToast({
        title: '更新失败',
        icon: 'none'
      });
    }
  }
  
  /**
   * 减少商品数量
   */
  async decreaseQuantity(item: CartItem) {
    if (item.quantity <= 1) return;
    
    try {
      await put('/cart/update', {
        itemId: item.id,
        quantity: item.quantity - 1
      });
      
      item.quantity--;
    } catch (error) {
      console.error('更新数量失败:', error);
      uni.showToast({
        title: '更新失败',
        icon: 'none'
      });
    }
  }
  
  /**
   * 删除商品
   */
  async removeItem(item: CartItem) {
    uni.showModal({
      title: '确认删除',
      content: '确定要删除这件商品吗？',
      success: async (res) => {
        if (res.confirm) {
          try {
            await del(`/cart/items/${item.id}`);
            
            const index = this.cartItems.findIndex(i => i.id === item.id);
            if (index > -1) {
              this.cartItems.splice(index, 1);
            }
            
            uni.showToast({
              title: '删除成功',
              icon: 'success'
            });
          } catch (error) {
            console.error('删除商品失败:', error);
            uni.showToast({
              title: '删除失败',
              icon: 'none'
            });
          }
        }
      }
    });
  }
  
  /**
   * 删除选中商品
   */
  deleteSelected() {
    if (this.selectedItems.length === 0) return;
    
    uni.showModal({
      title: '确认删除',
      content: `确定要删除选中的${this.selectedItems.length}件商品吗？`,
      success: async (res) => {
        if (res.confirm) {
          try {
            const itemIds = this.selectedItems.map(item => item.id);
            await post('/cart/batch-delete', { itemIds });
            
            // 从列表中移除
            this.cartItems = this.cartItems.filter(item => !item.selected);
            
            uni.showToast({
              title: '删除成功',
              icon: 'success'
            });
          } catch (error) {
            console.error('批量删除失败:', error);
            uni.showToast({
              title: '删除失败',
              icon: 'none'
            });
          }
        }
      }
    });
  }
  
  /**
   * 添加商品到购物车
   */
  async addToCart(product: Product) {
    try {
      await post('/cart/add', {
        productId: product.id,
        quantity: 1
      });
      
      uni.showToast({
        title: '已加入购物车',
        icon: 'success'
      });
      
      // 刷新购物车
      this.loadCartItems();
    } catch (error) {
      console.error('加入购物车失败:', error);
      uni.showToast({
        title: '加入失败',
        icon: 'none'
      });
    }
  }
  
  /**
   * 选择优惠券
   */
  selectCoupon(coupon: Coupon) {
    // 检查是否满足使用条件
    const totalAmount = this.selectedItems.reduce((sum, item) => {
      return sum + (item.price * item.quantity);
    }, 0);
    
    if (totalAmount < coupon.minAmount) {
      uni.showToast({
        title: `订单金额需满${coupon.minAmount}元`,
        icon: 'none'
      });
      return;
    }
    
    this.selectedCoupon = coupon;
    this.showCouponPopup = false;
  }
  
  /**
   * 结算
   */
  checkout() {
    if (this.selectedItems.length === 0) {
      uni.showToast({
        title: '请选择要结算的商品',
        icon: 'none'
      });
      return;
    }
    
    // 构建订单数据
    const orderData = {
      items: this.selectedItems.map(item => ({
        productId: item.productId,
        specifications: item.specifications,
        quantity: item.quantity,
        price: item.price
      })),
      couponId: this.selectedCoupon?.id
    };
    
    // 跳转到订单确认页面
    uni.navigateTo({
      url: `/pages/order/confirm?data=${encodeURIComponent(JSON.stringify(orderData))}`
    });
  }
  
  /**
   * 查看商品详情
   */
  viewProduct(product: Product) {
    uni.navigateTo({
      url: `/pages/product/detail?id=${product.id}`
    });
  }
  
  /**
   * 去购物
   */
  goShopping() {
    uni.switchTab({
      url: '/pages/recommend/recommend'
    });
  }
  
  /**
   * 格式化日期
   */
  formatDate(dateString: string): string {
    const date = new Date(dateString);
    return `${date.getFullYear()}.${String(date.getMonth() + 1).padStart(2, '0')}.${String(date.getDate()).padStart(2, '0')}`;
  }
  
  /**
   * 获取模拟购物车数据
   */
  getMockCartItems(): CartItem[] {
    return [
      {
        id: '1',
        productId: '1',
        product: {
          id: '1',
          title: '婴儿奶瓶套装',
          imageUrl: 'https://trae-api-us.mchost.guru/api/ide/v1/text_to_image?prompt=baby%20bottle%20set&image_size=square',
          currentPrice: 89.9,
          originalPrice: 129.9,
          stock: 99
        },
        specifications: {
          '容量': '240ml',
          '颜色': '粉色'
        },
        quantity: 2,
        price: 89.9,
        originalPrice: 129.9,
        selected: true
      },
      {
        id: '2',
        productId: '2',
        product: {
          id: '2',
          title: '婴儿连体衣5件套',
          imageUrl: 'https://trae-api-us.mchost.guru/api/ide/v1/text_to_image?prompt=baby%20onesie%20set&image_size=square',
          currentPrice: 68.0,
          originalPrice: 98.0,
          stock: 50
        },
        specifications: {
          '尺码': '66cm',
          '颜色': '混色'
        },
        quantity: 1,
        price: 68.0,
        originalPrice: 98.0,
        selected: true
      }
    ];
  }
  
  /**
   * 获取模拟推荐商品
   */
  getMockRecommendProducts(): Product[] {
    return [
      {
        id: '3',
        title: '婴儿安抚玩具',
        imageUrl: 'https://trae-api-us.mchost.guru/api/ide/v1/text_to_image?prompt=baby%20comfort%20toy&image_size=square',
        currentPrice: 45.0,
        stock: 30
      },
      {
        id: '4',
        title: '婴儿湿巾',
        imageUrl: 'https://trae-api-us.mchost.guru/api/ide/v1/text_to_image?prompt=baby%20wipes&image_size=square',
        currentPrice: 29.9,
        stock: 100
      },
      {
        id: '5',
        title: '婴儿洗护套装',
        imageUrl: 'https://trae-api-us.mchost.guru/api/ide/v1/text_to_image?prompt=baby%20care%20set&image_size=square',
        currentPrice: 78.0,
        stock: 25
      }
    ];
  }
  
  /**
   * 获取模拟优惠券数据
   */
  getMockCoupons(): Coupon[] {
    return [
      {
        id: '1',
        name: '新用户专享',
        discount: 20,
        condition: '满100元可用',
        expireTime: '2024-12-31T23:59:59Z',
        minAmount: 100
      },
      {
        id: '2',
        name: '满减优惠券',
        discount: 10,
        condition: '满50元可用',
        expireTime: '2024-06-30T23:59:59Z',
        minAmount: 50
      }
    ];
  }
}
</script>

<style lang="scss" scoped>
.cart-container {
  background-color: #f5f5f5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.cart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 30rpx;
  background-color: white;
  border-bottom: 1rpx solid #f0f0f0;
  
  .header-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #333;
  }
  
  .edit-btn {
    font-size: 28rpx;
    color: #007aff;
  }
}

.cart-list {
  flex: 1;
  padding: 20rpx 0;
}

.cart-item {
  display: flex;
  align-items: flex-start;
  background-color: white;
  padding: 30rpx;
  margin-bottom: 20rpx;
  
  .item-checkbox {
    margin-right: 20rpx;
    padding: 10rpx;
  }
  
  .item-image {
    width: 160rpx;
    height: 160rpx;
    border-radius: 12rpx;
    margin-right: 20rpx;
    flex-shrink: 0;
  }
  
  .item-info {
    flex: 1;
    
    .item-title {
      display: block;
      font-size: 28rpx;
      color: #333;
      line-height: 1.4;
      margin-bottom: 10rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    
    .item-specs {
      display: flex;
      flex-wrap: wrap;
      gap: 10rpx;
      margin-bottom: 15rpx;
      
      .spec-text {
        padding: 4rpx 8rpx;
        background-color: #f8f8f8;
        color: #666;
        font-size: 22rpx;
        border-radius: 6rpx;
      }
    }
    
    .item-bottom {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      
      .price-section {
        display: flex;
        align-items: baseline;
        
        .current-price {
          font-size: 30rpx;
          font-weight: 600;
          color: #ff4757;
          margin-right: 10rpx;
        }
        
        .original-price {
          font-size: 24rpx;
          color: #999;
          text-decoration: line-through;
        }
      }
      
      .quantity-section {
        display: flex;
        align-items: center;
        
        .quantity-btn {
          width: 50rpx;
          height: 50rpx;
          background-color: #f8f8f8;
          border: 1rpx solid #e0e0e0;
          display: flex;
          align-items: center;
          justify-content: center;
          
          &.disabled {
            background-color: #f0f0f0;
            border-color: #d0d0d0;
          }
          
          &:first-child {
            border-radius: 6rpx 0 0 6rpx;
          }
          
          &:last-child {
            border-radius: 0 6rpx 6rpx 0;
          }
        }
        
        .quantity-value {
          width: 80rpx;
          height: 50rpx;
          line-height: 50rpx;
          text-align: center;
          font-size: 26rpx;
          color: #333;
          border-top: 1rpx solid #e0e0e0;
          border-bottom: 1rpx solid #e0e0e0;
        }
      }
    }
  }
  
  .item-delete {
    margin-left: 20rpx;
    padding: 10rpx;
  }
}

.recommend-section {
  background-color: white;
  padding: 30rpx;
  margin-top: 20rpx;
  
  .recommend-header {
    margin-bottom: 25rpx;
    
    .recommend-title {
      font-size: 30rpx;
      font-weight: 600;
      color: #333;
    }
  }
  
  .recommend-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20rpx;
    
    .recommend-item {
      display: flex;
      flex-direction: column;
      
      .recommend-image {
        width: 100%;
        height: 200rpx;
        border-radius: 12rpx;
        margin-bottom: 10rpx;
      }
      
      .recommend-name {
        font-size: 24rpx;
        color: #333;
        line-height: 1.4;
        margin-bottom: 8rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
      
      .recommend-price {
        font-size: 26rpx;
        font-weight: 600;
        color: #ff4757;
        margin-bottom: 10rpx;
      }
      
      .add-cart-btn {
        width: 100%;
        height: 60rpx;
        font-size: 24rpx;
      }
    }
  }
}

.empty-cart {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 50rpx;
  
  .empty-image {
    width: 300rpx;
    height: 300rpx;
    margin-bottom: 40rpx;
  }
  
  .empty-text {
    font-size: 32rpx;
    color: #333;
    margin-bottom: 15rpx;
  }
  
  .empty-desc {
    font-size: 26rpx;
    color: #999;
    margin-bottom: 40rpx;
  }
  
  .go-shopping-btn {
    width: 300rpx;
    height: 80rpx;
    font-size: 28rpx;
  }
}

.cart-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 30rpx;
  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
  background-color: white;
  border-top: 1rpx solid #f0f0f0;
  
  .footer-left {
    display: flex;
    align-items: center;
    flex: 1;
    
    .select-all {
      display: flex;
      align-items: center;
      margin-right: 30rpx;
      
      .select-all-text {
        margin-left: 8rpx;
        font-size: 26rpx;
        color: #333;
      }
    }
    
    .total-info {
      display: flex;
      align-items: baseline;
      
      .total-label {
        font-size: 26rpx;
        color: #333;
      }
      
      .total-price {
        font-size: 32rpx;
        font-weight: 600;
        color: #ff4757;
        margin-right: 10rpx;
      }
      
      .total-discount {
        font-size: 22rpx;
        color: #999;
      }
    }
  }
  
  .footer-right {
    .delete-selected-btn {
      width: 200rpx;
      height: 70rpx;
      background-color: #ff4757;
      color: white;
      border: none;
      font-size: 26rpx;
      
      &[disabled] {
        background-color: #f0f0f0;
        color: #999;
      }
    }
    
    .checkout-btn {
      width: 200rpx;
      height: 70rpx;
      font-size: 26rpx;
      font-weight: 600;
      
      &[disabled] {
        background-color: #f0f0f0;
        color: #999;
      }
    }
  }
}

.coupon-popup {
  background-color: white;
  border-radius: 20rpx 20rpx 0 0;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  
  .popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30rpx;
    border-bottom: 1rpx solid #f0f0f0;
    
    .popup-title {
      font-size: 32rpx;
      font-weight: 600;
      color: #333;
    }
  }
  
  .coupon-list {
    flex: 1;
    padding: 20rpx 30rpx;
    
    .coupon-item {
      display: flex;
      align-items: center;
      padding: 25rpx 20rpx;
      margin-bottom: 20rpx;
      background: linear-gradient(135deg, #ff6b6b 0%, #ff8e8e 100%);
      border-radius: 12rpx;
      position: relative;
      
      &.selected {
        background: linear-gradient(135deg, #007aff 0%, #4da6ff 100%);
      }
      
      .coupon-content {
        flex: 1;
        display: flex;
        
        .coupon-amount {
          display: flex;
          align-items: baseline;
          margin-right: 25rpx;
          
          .coupon-symbol {
            font-size: 24rpx;
            color: white;
            margin-right: 2rpx;
          }
          
          .coupon-value {
            font-size: 48rpx;
            font-weight: 600;
            color: white;
          }
        }
        
        .coupon-details {
          flex: 1;
          
          .coupon-name {
            display: block;
            font-size: 30rpx;
            font-weight: 600;
            color: white;
            margin-bottom: 8rpx;
          }
          
          .coupon-condition {
            display: block;
            font-size: 24rpx;
            color: rgba(255, 255, 255, 0.8);
            margin-bottom: 5rpx;
          }
          
          .coupon-expire {
            font-size: 22rpx;
            color: rgba(255, 255, 255, 0.7);
          }
        }
      }
      
      .coupon-selector {
        margin-left: 20rpx;
      }
    }
    
    .no-coupons {
      text-align: center;
      padding: 80rpx 0;
      
      .no-coupons